class MessageBox {
  constructor(config) {
    this.$config = Object.assign(
      {
        width: 500,
        title: '弹窗标题',
        text: '弹窗文本内容',
        btntext: '按钮文本',
      },
      config
    )
    // 创建元素
    this.el = document.createElement('div')
    this.el.id = 'message-box'
    // this.el.style = `width:${this.$config.width}px`
    console.log(this.el)

    this.creat()
    this.btncallback()
  }
  // 创建元素
  creat() {
    const html = `
      <div id="bg"></div>
      <div id="card" style="width:${this.$config.width}px">
        <header>
          ${this.$config.title}
          <span>X</span>
        </header>
        <main>${this.$config.text}</main>
        <footer>
          <button>${this.$config.btntext}</button>
        </footer>
      </div>
      `
    this.el.innerHTML = html
    document.body.appendChild(this.el)
  }
  btncallback() {
    document.querySelector('#message-box button').addEventListener('click', this.$config.success.bind(this))
    document.querySelector('#message-box span').addEventListener('click', () => {
      this.el.remove()
    })
  }
  hide() {
    this.el.remove()
  }
}

export default function (config) {
  return new MessageBox(config)
}
